<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>unslider演示</title>
    <script src="jquery-1.11.1.min.js"></script>
    <script src="unslider.min.js"></script>
    <style>
        html,
        body {
            font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
        }
        
        ul,
        ol {
            padding: 0;
        }
        
        .banner {
            position: relative;
            overflow: auto;
            text-align: center;
            width: 640px;
        }
        
        .banner li {
            list-style: none;
        }
        
        .banner ul li {
            float: left;
        }
        
        #b04 .dots {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 10px;
        }
        
        #b04 .dots li {
            display: inline-block;
            width: 10px;
            height: 10px;
            margin: 0 4px;
            text-indent: -999em;
            border: 2px solid #fff;
            border-radius: 6px;
            cursor: pointer;
            opacity: .4;
            -webkit-transition: background .5s, opacity .5s;
            -moz-transition: background .5s, opacity .5s;
            transition: background .5s, opacity .5s;
        }
        
        #b04 .dots li.active {
            background: #fff;
            opacity: 1;
        }
        
        #b04 .arrow {
            position: absolute;
            top: 200px;
        }
        
        #b04 #al {
            left: 15px;
        }
        
        #b04 #ar {
            right: 15px;
        }
    </style>
</head>

<body>
    <div class="banner" id="b04">
        <ul>
            <li><img src="01.jpg" alt="" width="640" height="480"></li>
            <li><img src="02.jpg" alt="" width="640" height="480"></li>
            <li><img src="03.jpg" alt="" width="640" height="480"></li>
            <li><img src="04.jpg" alt="" width="640" height="480"></li>
            <li><img src="05.jpg" alt="" width="640" height="480"></li>
        </ul>
        <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="arrowl.png" alt="prev" width="20" height="35"></a>
        <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="arrowr.png" alt="next" width="20" height="37"></a>
    </div>
    <script>
        //页面加载完成时执行
        $(document).ready(function(e) {
            var unslider04 = $('#b04').unslider({
                    //是否显示指示器，取值true / false
                    dots: true
                })
                // 执行插件中 unslider 自定义方法
            var data04 = unslider04.data('unslider');
            $('.unslider-arrow04').click(function() {
                // 判断class名是prev还是next
                var fn = this.className.split(' ')[1];
                data04[fn]();
            });
        });
    </script>

</body>

</html>